<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-09 15:30:09
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-20 10:09:51
 * @FilePath: /shortRent-ui/src/views/system/tenant/balance.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="custom_card_0">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" size="small">
        <el-form-item label="租户名称" prop="tenantName">
          <el-input v-model="queryParams.tenantName" placeholder="请输入租户名称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="联系人" prop="tenantConcat">
          <el-input v-model="queryParams.tenantConcat" placeholder="请输入租户联系人" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="手机号" prop="tenantPhone">
          <el-input v-model="queryParams.tenantPhone" placeholder="请输入联系人手机号" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table v-loading="loading" :data="basicList" stripe
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border>
        <template slot="empty">
          <el-empty :image-size="50" description="暂无租户余额信息"></el-empty>
        </template>
        <el-table-column label="租户名称" align="center">
          <template v-slot="{ row }">
            {{ row.tenant.tenantName }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center">
          <template v-slot="{ row }">
            {{ row.tenant.tenantConcat }}
          </template>
        </el-table-column>
        <el-table-column label="电话" align="center">
          <template v-slot="{ row }">
            {{ row.tenant.tenantPhone }}
          </template>
        </el-table-column>
        <el-table-column label="账户余额" align="center" prop="balance" />
        <el-table-column label="电子合同(份)" align="center" prop="electronicContractCount" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="left"  width="200px">
          <template v-slot="{ row }">
            <el-button size="small" type="text" @click="handleDetail(row)">查看</el-button>
            <el-button size="small" type="text" @click="handleRecharge(1,row)">充值</el-button>
            <el-button size="small" type="text" @click="handleRecharge(2,row)">电子合同充值</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="background-color: #fff;padding-bottom: 10px; margin-top: 10px;">
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
    </div>

    <!-- 充值消费记录 -->
    <record-list ref="recordList"></record-list>
  </div>
</template>

<script>
import * as tenantApi from '@/api/system/tenant';
import RecordList from './components/recordList.vue';
import {electronicContractRecharge} from "@/api/system/tenant";
export default {
  name: 'Balance',
  components: {
    RecordList
  },
  data() {
    return {
      // 加载标识
      loading: false,
      // 总条数
      total: 0,
      // 租户余额列表表格数据
      basicList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tenantName: '',
        tenantConcat: '',
        tenantPhone: ''

      }
    }
  },
  created() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {
    // 搜索
    handleQuery() {
      this.refreshList();
    },
    // 重置
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.refreshList();
    },
    // 刷新列表
    refreshList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 查看
    handleDetail(row) {
      this.$refs.recordList.show(row.tenantId);
    },
    // 充值
    handleRecharge(type,row) {

      if (type ==1) {
        this.$prompt('请输入充值金额', '充值', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/,
          // inputPattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
          inputErrorMessage: '金额只能是数字,最多包含两位小数,请重新输入'
        }).then(({ value }) => {
            tenantApi.balanceRecharge({
              tenantId: row.tenantId,
              amount: value
            }).then(res => {
              if (res.code == 200) {
                this.refreshList();
                this.$message({
                  type: 'success',
                  message: '充值成功'
                });
              } else {
                this.$message({
                  type: 'error',
                  message: '充值失败'
                });
              }
            })
        })
      }else if(type == 2){
        this.$prompt('请输入数目', '电子合同', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /(^[1-9](\d+)?$)/,
          // inputPattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
          inputErrorMessage: '请输入正整数'
        }).then(({ value }) => {
          tenantApi.electronicContractRecharge({
            id: row.id,
            electronicContractCount: value
          }).then(res => {
            if (res.code == 200) {
              this.refreshList();
              this.$message({
                type: 'success',
                message: '充值成功'
              });
            } else {
              this.$message({
                type: 'error',
                message: '充值失败'
              });
            }
          })
        })
      }




    },
    /** 查询租户余额信息 */
    getList() {
      this.loading = true
      tenantApi.balanceList(this.queryParams).then(res => {
        this.basicList = res.rows;
        this.total = res.total;
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
}
</script>

<style scoped>
.customer_card_1 {
  background-color: #fff;
  padding: 30px;
  margin: 15px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
